<template>
	<div class="top">
		<p class="title">分类文章</p>
		<ul>
			<li>Web</li>
			<li>Java</li>
			<li>Unity</li>
		</ul>
	</div>
</template>

<script>
    export default {
        name: "TopOfRight"
    }
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.title {
			padding: .4rem .8rem;
		}
		ul {
			padding: .08rem 2rem;
		}
		li {
			padding: .3rem 0;
		}
	}
	@media screen and (min-width: 993px) {
		.title {
			padding: .1rem .2rem;
		}
		ul {
			padding: .08rem .2rem;
		}
		li {
			padding: .05rem 0;
		}
	}
	.title {
		font-size: .16rem;
		color: #939393;
		border-bottom: 1px solid #F8F8F8;
	}
	p:hover{
		cursor: default;
	}
	li {
		list-style: none;
		font-size: .15rem;
	}
	.top {
		background-color: #FFFFFF;
		border-radius: .1rem;
		overflow: hidden;
		margin-bottom: .2rem;
	}
	.top li:hover {
		color: #23b6d4;
		cursor: pointer;
	}
</style>
